<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/' }">我的订单</el-breadcrumb-item>
      <el-breadcrumb-item>列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 白色内容面板区 -->
    <div class="page_content">
      <h1>我的账单</h1>
      <el-table :data="page.records" border>
        <el-table-column prop="id" label="订单编号" width="180" align="center">
        </el-table-column>
        <el-table-column
          prop="serve"
          label="上菜状态"
          width="180"
          align="center"
        >
          <template slot-scope="props">
            <el-tag type="success" v-if="props.row.serve">已上菜</el-tag>
            <el-tag type="danger" v-else>未上菜</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pay" label="支付状态" width="180" align="center">
          <template slot-scope="props">
            <el-tag type="success" v-if="props.row.pay">已支付</el-tag>
            <el-tag type="danger" v-else>未支付</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="合计" width="180" align="center">
          <template slot-scope="props"> {{ props.row.prices }}元 </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="right">
          <template slot-scope="props">
            <el-button type="primary" @click="details(props.row.id)"
              >明细</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 购物车 -->
      <!-- 弹窗 -->
      <el-dialog title="明细" :visible.sync="dialogVisible" width="50%">
        <!-- 表格 -->
        <el-table :data="list" border>
          <el-table-column
            prop="foodsName"
            label="菜名"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="number"
            label="数量"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="price" label="单价" width="180" align="center">
          </el-table-column>
          <el-table-column label="价格" width="180" align="center">
            <template slot-scope="prop">
              {{ prop.row.price * prop.row.number }}元
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { list, updateServe, updatePay, details } from "@/util/request/orderApi";
import store from "@/store";

export default {
  name: "MyOrder",
  data() {
    return {
      // 分页数据
      page: {
        records: [],
        total: 1,
        current: 1,
      },

      // 明细
      list: [],
      dialogVisible: false,
    };
  },
  methods: {
    // 显示或者搜索订单
    searchList(val) {
      list({ current: val }).then((res) => {
        if (res.data) {
          this.page = res.data.data;
          let len = res.data.data.records.length;
          let tempList = [];
          for (let i = 0; i < len; i++) {
            console.log(
              "比较",
              store.state.userInfo.username,
              res.data.data.records[i].username
            );
            if (
              store.state.userInfo.username == res.data.data.records[i].username
            )
              tempList.push(res.data.data.records[i]);
          }

          this.page.records = tempList;

          for (let i = 0; i < this.page.records.length; i++) {
            this.page.records[i].pay =
              res.data.data.records[i].pay == "1" ? true : false;
            this.page.records[i].serve =
              res.data.data.records[i].serve == "1" ? true : false;
          }
          console.log("菜品数据", this.page);
        }
      });
    },

    // 换页
    handleCurrentChange(val) {
      this.searchList(val);
    },

    // 重定向
    link(path) {
      this.$router.push({
        path,
      });
    },

    changeServe(val) {
      updateServe(val).then((res) => {
        console.log(res);
      });
      console.log(val);
    },

    changePay(val) {
      updatePay(val).then((res) => {
        console.log(res);
      });
      console.log(val);
    },

    // 账单明细
    details(val) {
      details({ id: val }).then((res) => {
        this.list = res.data.data.items;
        console.log(this.list);
      });
      this.dialogVisible = true;
    },
  },

  mounted() {
    this.searchList();
  },
};
</script>

<style>
</style>